<script setup>
import { ref, watchEffect } from 'vue'
import IndexAdd from '@/components/index/IndexAdd.vue';
import { showMsg } from '@/components/Util';
import axios from 'axios';
import { onMounted} from 'vue';
import { useRouter } from 'vue-router';
import Page from '@/components/admin/Page.vue';
let index = ref({ id: '', fy: '', rs: '', cw: '', fj: '', sy: '' })
let Router = useRouter();
let student=ref({
    page:1,
    pageSize:0
})
let title = ref('预定房间');
let list = ref([]);
let input1 = ref('')
function getData(p=1) {
    axios.get('/api/kf_list/'+ p).then(res => {
        if (res.data.status == 200) {
            list.value = res.data.data.list;
            student.value.pageSize = res.data.data.page;

        } else {
            showMsg("数据获取失败", 'error', 2000);
        }
    })
}
watchEffect(() => {
    getData(student.value.page)
})
function newStudent() {
    addshow.value = false;
    getData();
}

function news() {
    addshow.value = true;
    title.value = '添加房源'
}

//删除
function del(id) {
    axios.delete('/api/kf_delete/' + id).then(res => {
        if (res.data.status == 200) {
            getData();
        } else {
            showMsg(res.data.msg, 'info', 2000);
        }
    })
}


let addshow = ref(false);
let optype = ref('new'); //new 新建 edit 编辑

onMounted(() => {
    getData();
})


//查询
function chxs() {
    if (input1.value != "") {
        axios.get('/api/getCx?name=' + input1.value).then(res => {
            console.log(res);
            list.value = res.data.data;
        })
    }
}
</script>

<template>
    <IndexAdd :title="title" :type="optype" :index="index" v-show="addshow" @submit="newStudent"></IndexAdd>
    <div class="page">
        <div class="tool">
            <div class="tooll">
                <div class="flex gap-4 mb-4 items-center">
                    <el-input class="ga" v-model="input1" style="width: 240px" size="large" placeholder="房间搜索" />
                    <button @click="chxs" class="cx">查询</button>
                    <button @click="addshow = news" class="nb">点击预定房间</button>
                </div>
            </div>
        </div>
        <ul class="list">
            <li class="xm">
                <span>房型</span>
                <span>可住人数</span>
                <span>床位数</span>
                <span>房价</span>
                <span>剩余</span>
            </li>
            <li class="item" v-for="item in list" :key="item.id">
                <span>{{ item.fy }}</span>
                <span>{{ item.rs }}</span>
                <span>{{ item.cw }}</span>
                <span>{{ item.fj }}</span>
                <span>{{ item.sy }}</span>
            </li>
        </ul>
        <Page v-model:total="student.pageSize" v-model:current="student.page"></Page>
    </div>
</template>

<style scoped>
.list {
    box-shadow: 2px 2px 2px 1px rgba(27, 25, 25, 0.2);
}

.list>li {
    display: grid;
    grid-template-columns: repeat(5 , 1fr);
    /* width: 1100px; */
    /* padding:30px; */
}

.list>li span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    border: 2px #ccc solid;
}

.tool {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.nb {
    border-radius: 10px;
    margin-left: 720px;
    height: 35px;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-left: 20px; */
}

.cx {
    margin-left: -40px;
    border-radius: 5px;
}

.ga {
    margin-left: 40px;
    /* border-radius: 20px; */
}

button {
    /* width: 50px; */
    height: 28px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    background-color: rgb(11, 191, 80);
    color: white;
    outline: none;
    border: 0;
    user-select: none;
    /* position: absolute; */
    /* top: 11.5%; */
}

button:hover {
    background-color: #cb119a;
    /* Green */
    color: white;
}

.xs {
    display: flex;
    gap: 20px;
}

.xm {
    font-size: 22px;
    font-weight: bold;
}

.mn {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}</style>